<template>
	<view>
		<view class="charge-info"></view>
		<view class="active">
			<image class="bg-img" src="../../static/orderDetailsBgimg.png" mode=""></image>
			<view class="info">
				<view class="title">
					已完成
				</view>
				<view class="time-box">
					<view class="time">{{hour}}</view>
					<view class="time-info">小时</view>
					<view class="time">{{min}}</view>
					<view class="time-info">分钟</view>
					<view class="time">{{second}}</view>
					<view class="time-info">秒</view>
				</view>
				<view class="date">订单日期：{{info.orderDate}}</view>
				<view class="no">订单编号：{{info.serialNumber}}</view>
				<view class="cabinet-name">
					<view class="name">{{info.cabinet.name}}</view>
					<image class="signal-icon"
						:src="heatSinkStatus == 0 ? '../../static/offLine.png' : heatSinkStatus == 1 ?'../../static/1.png':heatSinkStatus == 2 ?'../../static/2.png':'../../static/3.png'"
						mode=""></image>
				</view>
				<view class="equipment-no">
					设备编号：{{info.cabinet.code}}
				</view>
			</view>
		</view>
		<view class="content-view">
			<uni-card :border="false">
				<view class="card1">
					<view>开始时间：{{info.beginTimes}}</view>
					<view v-if="index == '2'">取出时间：{{info.lastOpenBinTime}}</view>
					<view>结束时间：{{info.endTime?info.endTime:'未结束'}}</view>
					<view>实时功率：{{info.bin.realTimeStatus.power / 10}}W</view>
				</view>
			</uni-card>
			<uni-card :border="false">
				<view class="card2">
					<view class="ordercost">
						<text class="ordercost-title">订单费用</text>
						<view v-if="costTemplateId != ''" class="more" @click="billingRules">
							<text>收费组成（电费+服务费+占仓费）</text>
							<image class="more-icon" src="../../static/more.png" mode=""></image>
						</view>
					</view>
					<view class="chargecost">
						<view class="charge">
							<text>充电费用：</text>
							<view v-if="info.chargeIntervalPrice">{{info.chargeWay==1?`按时收费(${info.chargeIntervalPrice.cost}元${info.chargeIntervalPrice.unitVolume}小时)`:info.chargeWay==2?'按量收费':'按次收费'}}</view>
							<view v-else>
								免费
							</view>
						</view>
						<view class="cost">
							<text>{{info.chargingFees}}元</text>
							<text>{{info.isPayChargingFees==1?'已支付':'未支付'}}</text>
						</view>
					</view>
					<view class="chargecost" v-if="info.occupyFees && info.occupyFees != '0'">
						<view class="charge">
							<text>占仓费用：</text>
							<view>
								所选充电时段内免费超出{{info.chargeIntervalPrice.chargeInterval.charge.occupyChargePrice}}元/小时,{{info.chargeIntervalPrice.chargeInterval.charge.occupyChargeUpperLimit}}元封顶
							</view>
						</view>
						<view class="cost">
							<text>{{info.occupyFees}}元</text>
							<text>{{info.isPayOccupyFees==0?'待支付':'已支付'}}</text>
						</view>
					</view>
					<view class="total">
						合计：{{total}}元
					</view>
				</view>
			</uni-card>
			<view v-if="index == '1'" class="endButton">
				<view v-if="isFulled==0" @click="finish(isFulled, info.id)" class="end immobilization-button">
					结束充电
				</view>
				<view v-if="isFulled==1"
					@click="endFinish(isFulled, info.isPayOccupyFees, info.occupyFees, info.id, info.cabinet.id)"
					class="end immobilization-button">
					开箱取出
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		loadUserChargingByIdOnMobile,
		userChargingStopCharging,
		checkWhiteListByCabinetIdOnMobile,
		userChargingFinish
	} from '../../api/api.js';
	import moment from '../../components/moment.js';
	export default {
		data() {
			return {
				index: '',
				hour: '00',
				min: '00',
				second: '00',
				info: '',
				total: 0,
				isFulled: '',
				isPayOccupyFees: '',
				costTemplateId: '',
				heatSinkStatus: ''
			}
		},
		onLoad: function(option) {
			this.index = option.index;
			this.id = option.id;
			this.isFulled = option.isFulled;
			this.heatSinkStatus = option.heatSinkStatus;
		},
		onShow() {
			this.orderdetails(this.id);
		},
		mounted() {},
		onHide() {
			clearInterval(this.time);
		},
		onUnload() {
			clearInterval(this.time);
		},
		methods: {
			orderdetails(id) {
				loadUserChargingByIdOnMobile({
						'id': id
					})
					.then((res) => {
						// console.log(res);
						if (res.code == 200) {
							checkWhiteListByCabinetIdOnMobile({
									'id': res.data.cabinet.id
								})
								.then((whiteres) => {
									this.costTemplateId = whiteres.data == false ? res.data.cabinet.id : '';
								})
							this.isFulled = res.data.isFulled;
							if (res.data.chargeIntervalPrice && res.data.chargeIntervalPrice.chargeInterval && res.data
								.chargeIntervalPrice.chargeInterval.charge) {}
							let time = moment.duration(res.data.endTime - res.data.beginTime);
							this.hour = time._data.hours;
							this.min = time._data.minutes;
							this.second = time._data.seconds;
							res.data.orderDate = moment(res.data.orderDate).format('YYYY-MM-DD');
							res.data.beginTimes = moment(res.data.beginTime).format('HH:mm:ss');
							res.data.endTime = res.data.endTime ? moment(res.data.endTime).format('HH:mm:ss') : '';
							res.data.chargingFees = res.data.chargingFees ? Number(res.data.chargingFees).toFixed(2) :
								'0';
							res.data.occupyFees = res.data.occupyFees ? Number(res.data.occupyFees).toFixed(2) : '0';
							res.data.lastOpenBinTime = res.data.lastOpenBinTime ? moment(res.data.lastOpenBinTime)
								.format('HH:mm:ss') : '';
							this.info = res.data;
							this.total = res.data.occupyFees ? (Number(res.data.chargingFees) + Number(res.data
								.occupyFees)).toFixed(2) : Number(res.data.chargingFees)
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 1500
							})
						}

					})
			},
			billingRules() {
				uni.navigateTo({
					url: '../billingRules/billingRules?id=' + this.costTemplateId
				})
			},
			finish(isFulled, id) {
				// isFulled 0没充满 1充满
				let that = this;
				uni.showModal({
					title: '提示',
					content: isFulled == '0' ? '当前未充满，结束充电后将断电，本次支付未使用的金额无法退还，确认结束充电？' : '谢谢您的使用，点击确定，结束充电',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							userChargingStopCharging({
									'id': id
								})
								.then((res) => {
									console.log(res);
									if (res.code == 200) {
										uni.showToast({
											title: res.data,
											icon: 'success',
											duration: 1500
										})
										that.orderdetails(that.id)
									} else {
										uni.showToast({
											title: res.message,
											icon: 'none',
											duration: 1500
										})
									}
								})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
				clearInterval(this.time);
			},
			endFinish(isFulled, isPayOccupyFees, occupyFees, id, cabinetId) {
				checkWhiteListByCabinetIdOnMobile({
						'id': cabinetId
					})
					.then((res) => {
						if (res.data == true) {
							this.white(id)
						} else {
							this.nowhite(isFulled, isPayOccupyFees, occupyFees, id)
						}
					})
			},
			white(id) {
				uni.showModal({
					title: '提示',
					content: '感谢您的使用，取出电池后请关好仓门。',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							userChargingFinish({
									'id': id
								})
								.then((res) => {
									if (res.code == 200) {
										uni.navigateBack({
											delta: 1
										})
									} else {
										uni.showToast({
											title: res.message,
											icon: 'none',
											duration: 1500
										})
									}
								})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			nowhite(isFulled, isPayOccupyFees, occupyFees, id) {
				console.log(isFulled);
				console.log(isPayOccupyFees)
				if (isFulled == '1' && Number(occupyFees) == 0) {
					uni.showModal({
						title: '提示',
						content: '感谢您的使用，取出电池后请关好仓门。',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								userChargingFinish({
										'id': id
									})
									.then((res) => {
										if (res.code == 200) {
											uni.navigateBack({
												delta: 1
											})
										} else {
											uni.showToast({
												title: res.message,
												icon: 'none',
												duration: 1500
											})
										}
									})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				} else if (isFulled == '1' && isPayOccupyFees == '0' && Number(occupyFees) > 0) {
					uni.navigateTo({
						url: `../occupancyFee/occupancyFee?id=${id}`
					})
				}
			}
		}
	}
</script>

<style lang="less">
	@import url('../commonStyle/commonStyle.css');

	page {
		background-color: #f7f7f7;
	}

	.charge-info {
		width: 100%;
		height: 100upx;
		background-color: #1976d2;
	}

	.active {
		display: flex;

		.bg-img {
			width: calc(100% - 20px);
			position: relative;
			margin: -90upx auto 0;
			height: 470upx;
		}

		.info {
			position: absolute;
			padding: 0 50upx;
			margin-top: -60upx;

			.title {
				font-size: 36upx;
				color: #393939;
				font-weight: bold;
			}
		}

		.time-box {
			display: flex;
			align-items: center;
			margin-top: 30upx;

			.time {
				width: 93upx;
				height: 83upx;
				border-radius: 5upx;
				background-color: #4ea7ff;
				text-align: center;
				line-height: 83upx;
				color: #fff;
				margin-right: 20upx;
				font-weight: bold;
				font-size: 36upx;
			}

			.time-info {
				font-size: 26upx;
				color: #4ea7ff;
				margin-right: 20upx;
			}
		}

		.date {
			font-size: 26upx;
			color: #bdbdbd;
			margin-top: 30upx;
		}

		.no {
			font-size: 26upx;
			color: #bdbdbd;
			margin-top: 20upx;
		}

		.cabinet-name {
			display: flex;
			align-items: center;
			font-size: 34upx;
			color: #3a3a3a;
			margin-top: 35upx;

			.signal-icon {
				width: 27upx;
				height: 27upx;
				margin-left: 15upx;
			}
		}

		.equipment-no {
			font-size: 26upx;
			color: #858585;
			margin-top: 20upx;
		}
	}

	.content-view {
		margin: 0 20rpx;

		.card1 {
			width: 100%;
			display: flex;
			flex: 1;
			align-items: center;
			flex-wrap: wrap;
			font-size: 28upx;
			color: #393939;
			padding: 25rpx 0;

			view {
				margin: 20upx 0;
				width: 260upx;
			}

			view:nth-child(2n) {
				margin-left: 100upx;
			}
		}

		.card2 {
			padding: 20upx 0;

			.ordercost {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.ordercost-title {
					font-size: 30upx;
					color: #393939;
					font-weight: bold;
				}

				.more {
					display: flex;
					align-items: center;
					font-size: 26upx;
					color: #858585;
				}

				.more-icon {
					width: 10upx;
					height: 17upx;
					margin-left: 10upx;
				}
			}

			.chargecost {
				min-height: 90upx;
				background-color: #f7f7f7;
				padding: 5upx 20upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20upx;

				.charge {
					font-size: 26upx;
					display: flex;
					align-items: center;

					text {
						color: #3a3a3a;
					}

					view {
						font-size: 24upx;
						color: #858585;
						width: 260upx;
					}
				}

				.cost {
					text:nth-child(1) {
						font-size: 30upx;
						color: #3a3a3a;
						margin-right: 30upx;
					}

					text:nth-child(2) {
						font-size: 24upx;
						color: #3a3a3a;
					}
				}
			}

			.total {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				font-size: 30upx;
				color: #ff9000;
				font-weight: bold;
				margin-top: 20upx;
			}
		}
	}

	.end {
		height: 86upx;
		background-image: linear-gradient(90deg,
				#1976d2 0%,
				#0d80e9 26%,
				#008aff 51%,
				#1976d2 100%),
			linear-gradient(#1976d2,
				#1976d2);
		color: #fff;
		line-height: 86upx;
		text-align: center;
		margin-top: 94upx;
		border-radius: 10upx;
		font-size: 34upx;
		// margin-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
		// margin-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	}

	.endButton {
		width: 100%;
		display: flex;
		justify-content: center;
	}
</style>
